<template lang="html">
  <div class="home">
    <TodayRecommend :musicurl="TodayRecommendParams.musicurl" :title="TodayRecommendParams.title" :typeMusic="TodayRecommendParams.typeMusic" :size="TodayRecommendParams.size" :offset="TodayRecommendParams.offset"/>
    <TodayRecommend :musicurl="NewsMusicParams.musicurl" :title="NewsMusicParams.title" :typeMusic="NewsMusicParams.typeMusic" :size="NewsMusicParams.size" :offset="NewsMusicParams.offset"/>
    <div class="banners">
    	<swiper :options="swiperOption">
		    <swiper-slide v-for="(slide, index) in banners" :key="index">
		    	<img :src="slide" alt="">
		    </swiper-slide>
		    <div class="swiper-pagination" slot="pagination"></div>
		</swiper>
    </div>
    <MusicNav/>
    <keep-alive>
       <router-view />
    </keep-alive>
    <TodayRecommend :musicurl="movieMusicParams.musicurl" :title="movieMusicParams.title" :typeMusic="movieMusicParams.typeMusic" :size="movieMusicParams.size" :offset="movieMusicParams.offset"/>
     <BackTop/>
  </div>

</template>

<script>
	import TodayRecommend from "../components/TodayRecommend"
	import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import 'swiper/dist/css/swiper.css'
    import MusicNav from "../container/musicContainer/musicNav"
    import BackTop from "../components/backtop"

export default {
	data(){
	  return{
         TodayRecommendParams:{
         	title:"今日榜单",
            typeMusic:1,
            size:6,
            offset:0,
            musicurl:"/more"
         },
         NewsMusicParams:{
         	title:"新歌速递",
            typeMusic:2,
            size:3,
            offset:0,
            musicurl:"/more2"
         },
         movieMusicParams:{
            title:"影视金曲",
            typeMusic:24,
            size:6,
            offset:0,
            musicurl:"/more2"
         },
         banners:[
         	require("../assets/img/b1.jpg"),
         	require("../assets/img/b2.jpg"),
            require("../assets/img/b3.jpg")
         ],
         swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          }
        }
	  }
	},
	components:{
	  TodayRecommend,
	  swiper,
      swiperSlide,
      MusicNav,
      BackTop
	}
}
</script>

<style lang="css" scoped>
</style>
